<template>
    <div class="problem-list">
        <h2>最新题目</h2>
        <table>
            <thead>
                <tr>
                    <th>题目ID</th>
                    <th>题目名称</th>
                    <th>更新时间</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="problem in problems" :key="problem.id">
                    <td>{{ problem.id }}</td>
                    <td>{{ problem.name }}</td>
                    <td>{{ problem.updateTime }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup>
const problems = [
    { id: '21924', name: '操作系列', updateTime: '15天前' },
    { id: 'GYM-102214A', name: 'Romeo and Pyramus', updateTime: '19天前' }
    // 其他题目数据...
];
</script>

<style scoped>
.problem-list {
    border: 1px solid #ccc;
    padding: 10px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    border: 1px solid #ccc;
    padding: 5px;
    text-align: left;
}
</style>